<template>
	<!-- 百科子组件 -->
	<view class="content">
		<!-- 雪茄品牌列表-- -->
		<view class="cigar-brand-slider">
			<view class="rotate-slider">
				<view class="list-item">
					<!-- <scroll-view scroll-x="true"  style="width:100%; overflow: hidden; white-space:nowrap"
						class="brand-photo">
						<view class="img_wrapper">
							<image :src="bannerLogoUrl"></image>
						</view>
					</scroll-view> -->
					<swiper @change="changeIndex" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
						<swiper-item v-for="item in data1" :key="item.logoUrl">
							<view class="img_wrapper">
								<image :src="item.logoUrl" @click="gotoDetail(item,index)"></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view> 
		</view>
		<!-- 品牌说明- -->
		<view class="cigar-brand-info">
			<!-- qweqweqweqweqw -->
			<!-- <swiper circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"> -->
				<view v-for="(item,index) in data1" :key="item.logoUrl">
					<view v-show="index == swIndex">
						<view class="info-head">
							<view class="cn-name">
								{{item.brandName}}
							</view>  
							<view class="en-name">
								{{item.nickName}}
							</view>
						</view>
						<view>
							{{item.content}}
						</view>
					</view>
				</view>
			<!-- </swiper> -->
			<!-- <view class="info-head">
				<view class="cn-name">
					{{brandName}}
				</view>  
				<view class="en-name">
					{{nickName}}
				</view>
			</view>
			<view>
				{{content}}
			</view> -->
		</view>
	</view>
</template>

<script setup>
import { computed, onMounted, ref } from 'vue';
	const props = defineProps({
		bannerLogoUrl:'',
		testValue:'',
		brandName:'',
		nickName:'',
		content:'',
		data1:[],
	})
	let swIndex = ref(0)
	// console.log("轮播组件",props);
	// const changeIndex(current,source){
	// 	console.log(current,source)
	// }
	// computed{
	// 	pdIndex(){
	// 		return swIndex
	// 	}
	// }
	let pdIndex = computed(
		()=>{  
			return swIndex  
		}
	)
	function changeIndex(e){
		swIndex.value = e.detail.current
		console.log('swIndex',swIndex)
	}
	const	gotoDetail =(item,index)=>{
		uni.navigateTo({
			url:`/pages/cigar-wiki-list/cigar-wiki-list?id=`+item.pkId
,
		})
	}
	
</script>

<style>
	/* .img_wrapper{
		width: 100%;
		height: 150px;
	}
	.img_wrapper image{
		width: 100%;
		height: 100%;
	} */
</style>